<section class="section" id="personal_project">
    <h2 class="title-thin text-muted">个人作品</h2>
    <div class="pf-wrap">
        <div class="pf-grid">

        <div class="pf-grid-sizer"></div><!-- used for sizing -->

            <div class="pf-grid-item photography">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/ubreed.jpg' | prepend: site.baseurl }}" alt="">
                    </figure>
                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">猪场育种信息管理系统</h2>
                                <p>基于Java的猪场育种信息管理系统。</p>
                                <a href="#pf-popup-1" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div id="pf-popup-1" class="pf-popup clearfix">
                    <div class="pf-popup-col1">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/ubreed.jpg' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col1 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">猪场育种信息管理系统</h2>
                            <p class="text-muted"><strong>design / development</strong></p>
                            <p>基于Java的猪场育种信息管理系统。</p>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->
            </div><!-- .pf-grid-item -->

            <div class="pf-grid-item design">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/g2p.png' | prepend: site.baseurl }}" alt="">
                    </figure>

                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">G2P</h2>
                                <p>基于Java的基因组分析研究工具（部分参与）</p>
                                <a href="#pf-popup-2" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="pf-popup-2" class="pf-popup clearfix">
                    <div class="pf-popup-col2">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/g2p.png' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col2 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">G2P</h2>
                            <p class="text-muted"><strong>design / development</strong></p>
                            <dl class="dl-horizontal">
                                <dt>展示地址:</dt>
                                <dd><a target = "_blank" href="https://github.com/XiaoleiLiuBio/G2P">GitHub主页</a></dd>
                            </dl>
                            <p>基于Java的基因组分析研究工具</p>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->

            </div><!-- .pf-grid-item -->

            <div class="pf-grid-item photography">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/aliyun.jpg' | prepend: site.baseurl }}" alt="">
                    </figure>

                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">阿里云云翼计划</h2>
                                <p>《搭建你的第一技术博客》</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- .pf-grid-item -->
        </div>
    </div>
</section><!-- .section -->